@import './includes/reset';
@import './includes/header';
@import './includes/footer';
/* 菜单部分 */
#menu{
    width: 100%;
    height: 46px;
    background: #3F2511;
    .container{
      height: 100%;
      line-height: 46px;
      width: 1200px;
      margin:0 auto;
      ul{
        display: flex;
        text-align: center;
        color: white;
        li{
          display: flex;
          width: 200px;
          cursor: pointer;
          &:hover{
            background: #FAE569;
            color: #000;
          }
        }
        .active{
            background: #FAE569;
            a{
            color: #000;
            }
        }
       a{
        width: 200px;
        height: 46px;
         color: white;
       }
      }
    }
  }
  /* 商品部分 */
  #product{
    margin-bottom: 15px;
    .container{
      width: 1200px;
      margin:0 auto;
      .title{
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        background: #FDF9E0;
        padding-left: 20px;
      }
      .sort{
        height: 50px;
        margin: 10px 0px;
        padding-left: 10px;
        background: #fff;
        & a:first-child{
          font-size: 20px;
          margin-right: 15px;
        }
        a{
          color: #000;
          line-height: 50px;
          margin-left: 5px;
          &:hover{
            text-decoration: underline;
            color: #DF8042;
          }
        }
      }
    }
  }
      /* 商品列表 */
  #productList{
    .container{
      width: 1200px;
      margin:0 auto;
      .cart{
        width: 100%;
        height: 56px;
        margin-top: 10px;
        line-height: 56px;
        display: flex;
        background-color: #ffffff;
        h3{
          margin:0px 54px;
          font-size: 18px;
          font-weight: normal;
        }
        p{
          font-size: 14px;
          color: #666666;
        }
      }

      .ul{
        width: 1200px;
        min-height: 300px;
     display: flex;
     flex-wrap: wrap;
        li{
          list-style: none;
              width: 250px;
              height: 304px;
              background-color: #fff;
              margin: 20px;
              padding: 15px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
            .pic{
              height: 180px;
             position: relative;
             img{
              width: 160px;
              height: 160px;
             position: absolute;
             left: 0;
             right: 0;
             top: 0;
             bottom: 0;
             margin: auto;
             }
            }
            p{
                   font-size: 14px;
     text-align: center;
      line-height: 26px;
            }
            .price{
              color: #ff6700;
            }
            .hide{
                   display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
            }
            button{
                  display: block;
                  margin: 1px auto;
                  cursor: pointer;
              }
        }
      }
   
    }
   
  }




  //   ul{
  //     width: 1200px;
  //     min-height: 300px;
  //     margin: 20px auto;
  //     overflow: hidden;
  // }
  // ul li{
  //     list-style: none;
  //     width: 236px;
  //     height: 304px;
  //     background-color: #fff;
  //     float: left;
  //     margin: 20px;
  //     padding: 15px;
  //     box-sizing: border-box;
  // }
  // ul li .pic{
  //     height: 180px;
  //     position: relative;
  // }
  // ul li .pic img{
  //     width: 160px;
  //     height: 160px;
  //     position: absolute;
  //     left: 0;
  //     right: 0;
  //     top: 0;
  //     bottom: 0;
  //     margin: auto;
  // }
  // ul li p{
  //     font-size: 14px;
  //     text-align: center;
  //     line-height: 26px;
  // }
  // ul li p.price{
  //     color: #ff6700;
  // }
  // ul li button{
  //     display: block;
  //     margin: 1px auto;
  //     cursor: pointer;
  // }
  
  // .hide{
  //     display: -webkit-box;
  //     -webkit-box-orient: vertical;
  //     -webkit-line-clamp: 2;
  //     overflow: hidden;
  // }